<template>
    <div
        class=" bg-white rounded-lg shadow-lg flex items-center"
    >
        <div class="text-center w-1/5 flex flex-col items-center m-4 border-r-2 pr-4">
            <img class="rounded-full w-32 border-2 border-green-700 object-cover" src="../assets/蝴蝶忍.jpg" />
            <div class="font-bold mt-2">{{ studentProfile.name }}</div>
            <div class="text-sm flex flex-row">
                @{{ studentProfile.college }}
                <div class="w-10 bg-red-200 px-2 rounded-md mx-2 text-red-700">Girl</div>
            </div>
        </div>
        <div class="grid w-4/5 grid-rows-3 grid-cols-3 grid-flow-col">
            <div v-for="info in studentProfile.infos" class="flex flex-col my-2">
                <div class="text-sm text-gray-500">{{ info.text }}</div>
                <div class="text-md font-bold">{{ info.val }}</div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            studentProfile: {
                name: 'Kochou Shinobu',
                college: 'CIEE',
                infos: [
                    { text: '专业', val: '计算机' },
                    { text: '班级', val: '计算190' },
                    { text: '年级', val: '2019' },
                    { text: '学号', val: '2019308250999' },
                    { text: '邮箱', val: '2019308250999@cau.edu.cn' },
                ]
            }
        }
    }
}
</script>